<template>
  <div class="work_sheet_procedure_manage">
    <one-title title="工单物料管理"></one-title>
    <mes-search :searchList="searchList"
                @searchInfo="_info">
    </mes-search>
    <div class="table_container">
      <el-table
        :data="listData.list"
        border
        stripe
        style="width: 100%"
        @sort-change="_sort"
        @selection-change="handleSelectionChange">
        <el-table-column
          prop="workorderNumber"
          label="工单编号"
          width="100"
          align="center"
          sortable
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="number"
          label="物料编码"
          align="center"
          width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="物料名称"
          align="center"
          width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="typeName"
          label="物料版本"
          align="center"
          width="100"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="isCurrentVersion"
          label="是否当前版本"
          align="center"
          width="110"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="isPurchase"
          label="制造外购"
          align="center"
          width="100"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="drawingNumber"
          label="图号"
          align="center"
          width="100"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="unitName"
          label="单位"
          align="center"
          width="126"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="specification"
          label="物料型号规格"
          align="center"
          width="105"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="materialInventoryNumber"
          label="物料清单编号"
          align="center"
          width="100"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="technologyProcedureNumber"
          label="工艺规程编号"
          align="center"
          width="135">
        </el-table-column>
        <el-table-column
          prop="gradeName"
          label="物料等级"
          align="center"
          width="100"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="trackDemandName"
          label="追溯要求"
          align="center"
          width="135">
        </el-table-column>
        <el-table-column
          prop="manufacturerName"
          label="制造单位"
          align="center"
          width="135">
        </el-table-column>
        <el-table-column
          prop="remarks"
          :resizable="false"
          label="备注"
          align="left"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </div>
    <mes-pagination
      @updateData="init"
      :currentPage="listData.pageNo"
      :total="listData.count || 0"
      :pageSize="listData.pageSize">
    </mes-pagination>
  </div>
</template>

<script>

export default {
  name: 'WorkSheetMaterialManage',
  data() {
    return {
      editState: false,
      selectData: [],
      currentPage: 1,
      pageSize: 15,
      pageSelect: [15, 30, 50, 100],
      jumpPage: '',
      searchData: {},
      sortData: {},
      searchList: [
        {
          label: '工单编号',
          value: '',
          name: 'workorderNumber',
          type: 'input'
        }, {
          label: '物料编码',
          value: '',
          name: 'number',
          type: 'input'
        },
        {
          label: '物料名称',
          value: '',
          name: 'name',
          type: 'input'
        },
        {
          label: '制造外购',
          value: '',
          name: 'isPurchase',
          type: 'select',
          selectList: [
            {
              id: '',
              label: '全部'
            },
            {
              id: '制造',
              label: '制造'
            },
            {
              id: '外购',
              label: '外购'
            }]
        },
        {
          label: '图号',
          value: '',
          name: 'drawingNumber',
          type: 'input'
        },
        {
          label: '物料型号规格',
          value: '',
          name: 'specification',
          type: 'input'
        },
        {
          label: '工艺规程编号',
          value: '',
          name: 'technologyProcedureNumber',
          type: 'input'
        },
        {
          label: '物料等级',
          value: '',
          name: 'gradeName',
          type: 'input'
        },
        {
          label: '追溯要求',
          value: '',
          name: 'trackDemandName',
          type: 'input'
        },
        {
          label: '制造单位',
          value: '',
          name: 'manufacturerName',
          type: 'input'
        },
        {
          label: '是否当前版本',
          value: '',
          name: 'isCurrentVersion',
          type: 'select',
          selectList: [
            {
              id: '',
              label: '全部'
            },
            {
              id: '是',
              label: '是'
            },
            {
              id: '否',
              label: '否'
            }
          ]
        }
      ]
    }
  },
  computed: {
    listData() {
      return this.$store.state.workSheetMaterialMan.listData
    },
    total() {
      return this.listData.count || 0
    },
    isRefresh() {
      return this.$store.state.workSheetMaterialMan.isRefresh
    },
    sumPage() {
      return Math.ceil(this.total / this.pageSize)
    }
  },
  watch: {
    'isRefresh'(now, old) {
      if (now) {
        this.init()
        let obj = {
          module: 'workSheetMaterialMan',
          state: false
        }
        this.$store.dispatch('setRefresh', obj)
      }
    }
  },
  components: {
  },
  mounted() {
    this.init()
  },
  methods: {
    init(page) {
      let pageObj = {
        pageNo: page ? page.pageNo : 1,
        pageSize: page ? page.pageSize : 15
      }
      let postData = {
        url: 'a/workordermaterial/workorderMaterial/list',
        data: {
          pageNo: pageObj.pageNo,
          pageSize: pageObj.pageSize,
          query: {
            delFlag: 0
          }
        },
        module: 'workSheetMaterialMan'
      }
      if (Object.keys(this.searchData).length > 0) {
        postData.data.query = this.searchData
      }
      this.$store.dispatch('initList', postData)
    },
    _info(data) {
      this.searchData = data
      this.init()
    },
    handleSelectionChange(val) {
      this.selectData = val
      if (this.selectData.length <= 1) {
        this.editState = false
      } else {
        this.editState = true
      }
    },
    jumpBtn() {
      let jumpNum = parseInt(this.jumpPage)
      if (jumpNum > this.sumPage) {
        jumpNum = this.sumPage
      }
      this.currentPage = jumpNum
      this.init()
    },
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    }
  }
}
</script>

<style scoped lang="less">

</style>
